cascading style sheets reference

כיצד פועלים ה-CSS-ים?

בסדר, אז ראינו ש-CSS-ים עוזרים להפריד בין תוכן ומראה. תוכן העמוד נכנס לקובץ HTML והמראה נכנס ל-css. אך כיצד כל זה הופך בסופו של דבר להיות דף אתר בדפדפן?

תחשבו על css כקבוצת הוראות והצעות לדפדפן, כיצד לתאר דף. שימו לב שאני אומר "להציע" ולא "להגיד", כיוון שה-CSS לא כופה על הדפדפן להציג דף בצורה מסוימת, הוא רק מציע לדפדפן כיצד הדף אמור להיות מוצג, וזוהי אבחנה חשובה.

כל CSS ( הכלול בקובץ .css) הוא סדרה של הוראות הנקראות הצהרות (statements). ההצהרה עושה 2 דברים:

1. היא מזהה את האלמנטים בעמוד שעליהם היא משפיעה.
2. היא אומרת לדפדפן כיצד לתאר אלמנטים אלה.

כשאני אומר אלמנטים אני מתכוון לפסקאות, קישורים, רשימת פריטים וכדומה. לפי מונחים טכניים של HTML, אלמנט הוא כל דבר שמסומן בתוויות HTML.

חלק ההצהרה שמזהה את האלמנטים בדף נקרא selector (בורר). הבוררים, בוחרים אלמנטים בדף.

חלק ההצהרה שאומר לדפדפן כיצד יש לתאר אלמנטים נבחרים נקרא declaration (הכרזה). הכרזה יכולה להכיל מספר די גדול של מאפיינים שהם חלקי הסגנון האישיים שיש ליישם על האלמנט הנבחר

. הנה לכם דוגמא להמחיש על מה אנו מדברים :

BODY
{
font-family: verdana, "minion web", helvetica, sans-serif;
font-size: 1em;
text-align:justify;
}

זוהי הצהרה בודדת, אולי אחת מתוך הרבה הצהרות ב-CSS.

הבורר הוא "BODY" (גוף). פירושו של דבר שההצהרה תשפיע על אלמנט הגוף בכל דף המקושר ל-CSS זה.

להכרזה (declaration) יש 3 מאפיינים. פירוש הדבר הוא שכל אלמנט שנבחר ע"י הבורר הזה יהיו לו 3 מאפיינים שמושפעים ממנו. במקרה הזה, הפונט של טקסט הגוף יתואר ב-verdana ע"י הדפדפן. אם אין אפשרות להשתמש בורדנה, הדפדפן ישתמש בשרת הרשת, או שאם גם זה אינו מתאפשר, אז נשתמש ב-Helvetica. אם אף אחד מהפונטים המצוינים אינו זמין, הדפדפן יתאר את טקסט הגוף בפונט san-serif כברירת מחדל.
בנוסף, כדי להשפיע על הפונט באלמנטים נבחרים, הצהרה זו קובעת את גודל הפונט ל1em-. אנו נבדוק את יחידת ה-em ויחידות אפשריות אחרות מאוחר יותר. אם אתם יודעים לעבוד עם HTML, אתם וודאי יודעים שלא ניתן לקבוע גדלים נקודתיים בעזרת ה-HTML, אלא פשוט אחד מתוך 6 גדלי פונטים יחסיים.
זהו עוד יתרון מובחן שיש ל-CSS-ים - מבנה דף הרבה יותר מתוחכם ובקרה טיפוגרפית.ואחרון חביב, הדפדפן מונחה לתאר את טקסט הגוף כמוצדק לחלוטין.

בחלק זה

בשיעור זה ראינו מהו באמת ה-CSS. אתם יכולים לתאר לעצמכם CSS כסוג של תוכנת מחשב מומחית. תוכנת מחשב היא סדרה של הוראות שנכתבה בשפה ספציפית שאומרת למחשב כיצד לבצע משימה מסוימת. CSS היא סדרה של הוראות שנכתבה ב-CSS1 או ב-CSS2 (שפות), המציעה לדפדפן כיצד לתאר דפים של אתר.

כעת, לפני שנמשיך ונתבונן מקרוב בכל אחד מההיבטים הנ"ל, אל תתנו לרעיון של לימוד שפת תכנות ושל תכנות מחשבים להוציא לכם את החשק. בדיוק כפי שנהניתם מהאתגר של העבודה עם HTML (בין אם כשהקלדתם "raw code" או כשהשתמשתם בכלי עריכה), תמצאו גם את העבודה עם CSS-ים מאוד מהנה. כמו-כן, כלי כמו
Style Master מפיג את השעמום והתסכול מן העבודה. (O.K, אנחנו צריכים להשיג חיבור מהספונסרים
שלנו כאן, איפה שהוא).

בחלק הבא

הגיע הזמן להפשיל שרוולים - אנו נכנסים כעת לפרטים של ה-CSS-ים, ואנו נלמד כיצד ליצור אותם ולערוך אותם. אנו נתחיל בבחינה של אבני הבניין של CSS-ים, הן ההצהרות (statements).